import { useEffect, useState } from 'react'
import { useLocation, useNavigate, useOutlet } from 'react-router-dom'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import type { IBigScreenContext } from '../Context/BigScreenContext'
import BigScreenContext from '../Context/BigScreenContext'
import './index.less'

function Home() {
  const location = useLocation()
  const currentOutlet = useOutlet()
  const navigator = useNavigate()
  // const { onSlideToLeft, onSlideToRight } = useContext(BigScreenContext);
  const [slideTye, setSlideType] =
    useState<IBigScreenContext['slideTye']>('slide-to-left')

  useEffect(() => {
    navigator('/bgBaseData')
  }, [])

  return (
    <div className="page-home">
      <BigScreenContext.Provider
        value={{
          slideTye,
          onSlideToLeft: () => {
            setSlideType('slide-to-left')
          },
          onSlideToRight: () => {
            setSlideType('slide-to-right')
          }
        }}
      >
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={location.pathname}
            appear={false}
            timeout={300}
            classNames={slideTye}
            unmountOnExit
          >
            <div className="transiton-root">{currentOutlet}</div>
          </CSSTransition>
        </SwitchTransition>
      </BigScreenContext.Provider>
    </div>
  )
}

export default Home
